<template>
  <swiper :options="swiperOption">
    <swiper-slide
      v-for="item in position_1"
      :key="item.id"
    >
      <router-link :to="'/show/' + item.id">
        <img
          class="img-fluid"
          :src="domain+item.thumb"
          :key="item.thumb"
        >
        <div class="swiper-title">{{item.title}}</div>
      </router-link>
    </swiper-slide>
    <div
      class="swiper-button-prev"
      slot="button-prev"
    ></div>
    <div
      class="swiper-button-next"
      slot="button-next"
    ></div>
    <div class="swiper-pagination"></div>
  </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapState, mapActions } from "vuex";
export default {
  name: 'carousel',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      domain: process.env.VUE_APP_baseURL,
      swiperOption: {
        autoplay: true,
        effect: 'fade',
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        loopAdditionalSlides: 0,
        loopedSlides: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        disableOnInteraction: true,
        autoHeight: true,
        mousewheelControl: true,
        observeParents: true,
        debugger: true,
      }
    }
  },
  computed: {
    ...mapState('news', ['position_1'])
  },
  created () {
    this.positionChange({ positionId: 1, limit: 5 });
  },
  methods: {
    ...mapActions('news', ['positionChange'])
  }
}
</script>
<style scoped>
.img-fluid {
  width: 100%;
}
.swiper-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    to(rgba(0, 0, 0, 0.8))
  );
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.8) 100%);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
}
.swiper-button-prev,
.swiper-button-next {
  height: 22px;
}
.swiper-pagination {
  right: 10px;
  top: 0;
}
</style>
